<template>
    <h1>Vue组件基本属性</h1>
    <p>{{ str }}</p>
    <p>num: {{ num }}</p>
    <p>{{ isBool }}</p>
    <p>{{ arr }}</p>
    <p>{{ arr[0] }}</p>
    <p>{{ obj }}</p>
    <p>{{ obj.a }}</p>
    <h1>props</h1>
    <p>{{ title }}</p>
    <p>{{ propA }}</p>
    <h1>methods</h1>
    <button @click="btnAction">点击方法</button>
    <h1>computed</h1>
    <p>{{ num2 }}</p>
    <h1>watch</h1>
    <button @click="addHandle">num + 1</button>
    <button @click="minHandle">num - 1</button>

</template>


<script>
export default {
    props:{
        title:String,
        propA:{
            type: Number,
            default: 10
        }
    },
    data(){
        return {
            str:"test",
            num:1,
            isBool: true,
            arr:[1,2,3],
            obj:{
                a:1,
                b:2
            }
        }
    },
    computed:{
        num2(){
            return this.num + 1
        }
    },
    watch:{
        num:(newVal, oldVal)=>{
            console.log('newVal',newVal);
            console.log('oldVal', oldVal);
        }
    },
    methods:{
        btnAction(){
            console.log('123213');
            console.log(this.str);
            this.test()
        },
        test(){
            console.log("test method");
        },
        addHandle(){
            this.num = this.num + 1
        },
        minHandle(){
            this.num = this.num - 1
        }
    },
}
</script>